<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>条件渲染</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h2>当前的n值为:{{num}}</h2>
    <button @click="num++">点我加一</button>

    <!-- v-show渲染的元素会一直在只是通过display:none来隐藏 -->
    <h2 v-show="num>10">当前的n值大于10</h2>

    <!-- v-show渲染的元素会直接删除重新渲染 -->
    <h2 v-if="num<10">当前的n值大于10</h2>

    <div v-if="num<10">if</div>
    <div v-else-if="num>10">else-if</div>
    <div v-else>else</div>

    <!-- template标签不会影响页面的渲染,只能使用v-if不能使用v-show -->
    <template v-if="num<10">
      <h1>123</h1>
      <h1>123</h1>
      <h1>123</h1>
    </template>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;

  new Vue({
    el: '#root',
    data: {
      num: 0,
    },
    methods: {

    }
  })
</script>

</html>